<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 模糊查询 -->
        <input type="text" placeholder="请输入内容" v-model="filterKey">
        <ul>
            <li v-for="item in filterArr_computed">
                {{item.name}}-{{item.age}}
            </li>
        </ul>
    </div>

    <script>
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    arr: [
                        {name:'张三',age:20},
                        {name:'李四',age:19},
                        {name:'老李头',age:16},
                        {name:'老三',age:18},
                    ],
                    filterArr:[],
                    filterKey:'',//模糊查询关键字
                };
            },

            //watch实现过滤
            /* watch:{
                filterKey:{
                    immediate:true,
                    handler(value){
                        console.log(value);
                        //filter函数被应用在this.arr数组上，可以通过在回调函数中定义过滤条件来过滤数组元素。
                        //回调函数接受一个参数，表示数组中的每个元素，你可以在回调函数中编写逻辑来判断是否保留该元素。
                        //<注意>某个字符串.indexOf('')是0而不是-1 (因为空字符串在任何字符串中都会被认为是存在的。)
                        this.filterArr = this.arr.filter(item => {
                            return item.name.indexOf(this.filterKey) != -1;
                        })
                    }
                }
            }, */

            //computed实现过滤
            //当computed和watch都可以实现基本功能时优先考虑computed
            computed:{
                filterArr_computed(){
                    return this.arr.filter(item => {
                        return item.name.indexOf(this.filterKey) != -1;
                    })
                }
            }
        })
    </script>
</body>
</html>